<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>个人博客</title>
	<style>

		.content{
			width:1000px;
			height:850px;
			margin:0 auto;
			background-color: white;
		}
		.header{
			width:1000px;
			height:247px;
			background-image: url("image/image/MarthaBlog.jpg");
			float:left;
		}
		.left{
			float:left;
			width:200px;
			height:540px;
			margin-top: 40px;
	/*		background-color: blue;*/
		}

		.left ul{
			list-style: none;
		}
		.left li{
			height:25px;
			line-height: 25px;
		}
		.left a{  
				text-decoration:none; 
				border-bottom:1px solid #ccc; /* #ccc换成链接的颜色 */
/*				display: inline-block; */
				padding-bottom:1px;  /*这里设置你要空的距离*/
				}
		.middle{
			float:left;
			width:460px;
			height:540px;
			margin-left:30px;
			margin-top: 40px;
		/*	background-color: yellow;*/
		}
		.middle img{
			margin-left:50px;
		}
		.right{
			float:left;
			width:280px;
			height:540px;
			margin-left:30px;
			margin-top: 40px;
		/*	background-color: red;*/
		}
		.right p{
			margin:0;
			padding:0;
			margin-top:30px;
		}
		.box{
			width:230px;
			height:260px;
			border:1px solid gray;
		}
		.box p{
			margin-left:60px;
		}

		.right .input2{
			margin:0;
			padding:0;
			margin-top:100px;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="header"></div>
		<div class="left">
		<ul>
			<li><a href="#">CATIGORY</a></li>
			<li><a href="#">Culture</a></li>
			<li><a href="#">View All Tags</a></li>
			<li><a href="#">Browse by Flavor</a></li>
			<li><a href="#">BuddyPress</a></li>
			<li><a href="#">Business</a></li>
			<li><a href="#">Education</a></li>
			<li><a href="#">Celebrities</a></li>
			<li><a href="#">Entertainment</a></li>
			<li><a href="#">College</a></li>
			<li><a href="#">Technology</a></li>
			<li><a href="#">Music</a></li>
			<li><a href="#">WordPress</a></li>
			<li><a href="#">WordPress</a></li>
			<li><a href="#">WordPress.org</a></li>
			<li><a href="#">The Martha Blog</a></li>
			<li><a href="#">BuddyPress</a></li>
			<li><a href="#">Celebrities</a></li>
			<li><a href="#">Education</a></li>
			<li><a href="#">Experience</a></li>
		</ul>

		</div>
		<div class="middle">
			<p>JULY 25,2018 </p>
			<h1>The City University of New York</h1>
			<p>www2.cuny.edu</p>
			<p>The City University of New York (CUNY) is the public university system of New York City, 
			</p>
			<p>Source: www.themarthablog.com</p>
			<img src="image/image/house-300x200.jpg">
			<p>and the largest urban university in the United States.</p>

		</div>
		<div class="right">
			<p>SEARCH</p>
			<input  type="text"  ></input><button>GO</button>
			<p>MOST RECENT POSTS</p>
				<div class="box">
					 <p>WordPress.org WordPress.com WordPress.com</p>

					 <p>WordPress.com VIP
					 WordPress MS</p>
					 <p>BuddyPressWordPress MS  is Very Important</p>
				</div>
				<div class="input2">
					<p>MOST ACTIVITIES</p>
					<input type="text" >
						<select name="add">
							<option value=“BuddyPress”></option>
						</select>
					</input>
				</div>
		</div>
	</div>
</body>
</html>